<template>
  <div class="item">
    <div class="meta">
      {{ updated(entity) }}
    </div>
    <div class="container">
      <div class="header" @click="open = !open">
        {{ header(entity) || "新建笔记" }}
      </div>
      <div class="extra" v-if="open">
        <editor :entity="entity"></editor>
        {{ words(entity) }} 字
        <i class="right floated trash icon" @click="destory(entity)"></i>
      </div>
    </div>
  </div>
</template>

<script>
import Editor from "./Editor";
import { mapGetters, mapActions } from "vuex";
export default {
  data() {
    return {
      open: false
    };
  },
  props: ["entity"],
  name: "Note",
  components: {
    Editor
  },
  computed: {
    ...mapGetters(["updated", "words", "header"])
  },
  methods: {
    ...mapActions(["destory"])
  }
};
</script>

<style></style>
